import React, { useState } from 'react';
import { Card, Button } from '@weubi/ui';
import { PlusIcon, PlayIcon, PauseIcon, TrashIcon } from '@heroicons/react/24/outline';

interface Task {
  id: string;
  name: string;
  url: string;
  status: 'pending' | 'running' | 'completed' | 'failed';
  createdAt: string;
  lastRun?: string;
}

const TasksPage: React.FC = () => {
  const [tasks, setTasks] = useState<Task[]>([
    {
      id: '1',
      name: '示例爬虫任务',
      url: 'https://example.com',
      status: 'completed',
      createdAt: '2024-01-15T10:00:00Z',
      lastRun: '2024-01-15T14:30:00Z'
    },
    {
      id: '2',
      name: '新闻网站爬取',
      url: 'https://news.example.com',
      status: 'running',
      createdAt: '2024-01-15T11:00:00Z',
      lastRun: '2024-01-15T15:00:00Z'
    }
  ]);

  const getStatusColor = (status: Task['status']) => {
    switch (status) {
      case 'pending':
        return 'text-yellow-600 bg-yellow-100';
      case 'running':
        return 'text-blue-600 bg-blue-100';
      case 'completed':
        return 'text-green-600 bg-green-100';
      case 'failed':
        return 'text-red-600 bg-red-100';
      default:
        return 'text-gray-600 bg-gray-100';
    }
  };

  const getStatusText = (status: Task['status']) => {
    switch (status) {
      case 'pending':
        return '等待中';
      case 'running':
        return '运行中';
      case 'completed':
        return '已完成';
      case 'failed':
        return '失败';
      default:
        return '未知';
    }
  };

  const handleStartTask = (taskId: string) => {
    setTasks(prev => prev.map(task => 
      task.id === taskId 
        ? { ...task, status: 'running' as const, lastRun: new Date().toISOString() }
        : task
    ));
  };

  const handleStopTask = (taskId: string) => {
    setTasks(prev => prev.map(task => 
      task.id === taskId 
        ? { ...task, status: 'pending' as const }
        : task
    ));
  };

  const handleDeleteTask = (taskId: string) => {
    setTasks(prev => prev.filter(task => task.id !== taskId));
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-900">爬虫任务管理</h1>
        <Button className="flex items-center gap-2">
          <PlusIcon className="h-5 w-5" />
          创建新任务
        </Button>
      </div>

      <div className="grid gap-6">
        {tasks.map((task) => (
          <Card key={task.id} className="p-6">
            <div className="flex items-center justify-between">
              <div className="flex-1">
                <div className="flex items-center gap-3 mb-2">
                  <h3 className="text-lg font-semibold text-gray-900">{task.name}</h3>
                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
                    {getStatusText(task.status)}
                  </span>
                </div>
                <p className="text-gray-600 mb-2">{task.url}</p>
                <div className="text-sm text-gray-500">
                  <p>创建时间: {new Date(task.createdAt).toLocaleString('zh-CN')}</p>
                  {task.lastRun && (
                    <p>最后运行: {new Date(task.lastRun).toLocaleString('zh-CN')}</p>
                  )}
                </div>
              </div>
              
              <div className="flex items-center gap-2">
                {task.status === 'running' ? (
                  <Button
                    variant="secondary"
                    size="sm"
                    onClick={() => handleStopTask(task.id)}
                    className="flex items-center gap-1"
                  >
                    <PauseIcon className="h-4 w-4" />
                    停止
                  </Button>
                ) : (
                  <Button
                    variant="primary"
                    size="sm"
                    onClick={() => handleStartTask(task.id)}
                    className="flex items-center gap-1"
                  >
                    <PlayIcon className="h-4 w-4" />
                    启动
                  </Button>
                )}
                
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleDeleteTask(task.id)}
                  className="flex items-center gap-1 text-red-600 hover:text-red-700"
                >
                  <TrashIcon className="h-4 w-4" />
                  删除
                </Button>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {tasks.length === 0 && (
        <Card className="p-12 text-center">
          <p className="text-gray-500 mb-4">暂无爬虫任务</p>
          <Button className="flex items-center gap-2 mx-auto">
            <PlusIcon className="h-5 w-5" />
            创建第一个任务
          </Button>
        </Card>
      )}
    </div>
  );
};

export default TasksPage;
